import React from 'react'
import styled from 'styled-components'



const CommonLabel = styled.span`
    color:#ccc;
    font-size: 14px;
    margin: 0 5px;
`

const CommonInput = styled.input.attrs({ type: 'input' })`
 font-size: 1em;
  border: 1px solid #333;
  border-radius: 3px;
  width: 50px;
`

const CommonBtn = styled.button`
  font-size: 1em;
  border: 2px solid #333;
  border-radius: 3px;
  &:hover{
    color:#fff;
    background-color: #555;
  }
`

const CommonCheckBox = styled.input.attrs({ type: 'checkbox' })`
 
`

const CommonBar = (props: any) => {


  return (
    <>

      {
        props.type === 'input' ?
          <>
            <CommonLabel>{props.label}</CommonLabel>
            <CommonInput></CommonInput>
          </> :
          props.type === 'checkbox' ?
            <>
              <CommonCheckBox></CommonCheckBox>
              <CommonLabel>{props.label}</CommonLabel>
            </> :
            props.type === 'button' ?
              <>
                <CommonBtn>{props.label}</CommonBtn>
              </> :
              <></>
      }


    </>
  )
}

export default CommonBar